<extend name="Public/layout"/>
<block name="body">
    <link rel="stylesheet" href="/Kcdns/Public/Admin/plugins/TableTree/jquery.treeTable.css"/>
    <script src="/Kcdns/Public/Admin/plugins/TableTree/jquery.treeTable.js"></script>
    <style>
        section.content{
            padding-left: 0;
            margin-left: 15px;
        }
        #treeTable1{
            border-spacing: 2px;
            border-collapse: inherit;
        }
        #treeTable1 th, #treeTable1 td{
            padding: 5px 20px 5px 20px;
        }
    </style>
    <table id="treeTable1"></table>
    <script>
        $(function () {
            var data = {$list};
            var title = data.title;
            var option = {
                expandLevel: "{$current_level}",
                data: data,
                title: title,
                beforeExpand: function ($treeTable, id) {
                    if ($('.' + id, $treeTable).length) {
                        return;
                    }

                    $.ajax({
                        url: '{:U("user/getUnderRelation")}',
                        type: 'post',
                        data: {
                            uid: id,
                            level: $.trim($('#' + id).find('td:eq(1)').text()),
                            start_time: $('[name="start_time"]').val(),
                            end_time: $('[name="end_time"]').val()
                        },
                        dataType: 'json',
                        success: function (result) {
                            $treeTable.addChilds($treeTable.build(result.data));
                        }
                    });
                }
            };
            $('#treeTable1').treeTable(option);
            $('#treeTable1').parent( ".content" ).css({height:($(window).height()-150),"overflow-x": "auto"})
        });
    </script>
</block>